<template>
	<view class="buy-Now">
		<view class="mask" @click="close()"  @touchmove.stop.prevent></view>
		<view  class="buyNow">
			<image src="/static/close.png" class="close" @click="close" mode=""></image>
			<view class="buy-box">
				<image src="/static/glBan.png" class="goods-img" mode=""></image>
				<text class="price">￥</text><text class="priceNum">139.00</text>
				<br>
				<text class="goodsNum">仅剩1件</text>
				<text class="goodsNo">编号：12561543157</text>
			</view>
			<view class="buy-box" v-for='(item,index) in typeData' :key='index'>
				<text class="buy-label">{{item.title}}</text>
				<view class="item-list">
					<view 
					v-for='(itemData,innerIndex) in item.data' 
					:key='innerIndex'
					class="item"
					:class="itemData.typeNo===typeIndex[item.menuNo]?'item-active':''" 
					@click="chooseType(item.menuNo,itemData.typeNo)"  
					>
					{{itemData.name}}
					</view>
				</view>
			</view>
			<view class="buy-box">
				<text class="buy-label hf-l">数量</text>
				<view class="number">
					<view class="minus" :class="goodsNum<2?'amUnable':''" @click="minusNum">-</view>
					<view class="num">{{goodsNum}}</view>
					<view class="add" @click="addNum">+</view>
				</view>
			</view>
			<view class="buy-btn" @click="commit">
				确  定
			</view>
		</view>
		
	</view>
</template>

<script>
	export default{
		props: {
			config: {
				type: Object,
				default: function(){
					return{
						buyType:''
					}
				}
			},
		},
		data(){
			return{
				typeIndex:[],
				goodsNum:1,
				typeData:[
					{
						title:'颜色',
						data:[{name:'深灰色',typeNo:0},{name:'蓝色',typeNo:1},{name:'白色',typeNo:2}],
						menuNo:0
					},
					{
						title:'尺码',
						data:[
							{name:'29(175/72A)',typeNo:0},{name:'30(175/76A)',typeNo:1},{name:'30(175/76A)',typeNo:2},
							{name:'29(175/72A)',typeNo:3},{name:'30(175/76A)',typeNo:4},
						],
						menuNo:1
					},
				]
			}
		},methods: {
			close(){
				//#ifdef APP-PLUS|| MP-WEIXIN
				this.$parent.closeBuy();
				//#endif
				//#ifndef APP-PLUS|| MP-WEIXIN
				this.$parent.$parent.closeBuy();
				//#endif
			},
			chooseType(menuIndex,_typeIndex){
				this.$set(this.typeIndex, menuIndex, _typeIndex);
				console.log(this.typeIndex[menuIndex]==_typeIndex)
			},
			addNum(){
				this.goodsNum++
			},
			minusNum(){
				if(this.goodsNum>1){
					this.goodsNum--
				}
				
			},
			commit(){
				console.log(this.config.buyType)
				if(this.config.buyType == 'buy'){
					uni.navigateTo({
						url:'confirmOrder'
					})
				}else if(this.config.buyType == 'add'){
					//#ifdef APP-PLUS|| MP-WEIXIN
					this.$parent.closeBuy();
					//#endif
					//#ifndef APP-PLUS|| MP-WEIXIN
					this.$parent.$parent.closeBuy();
					//#endif
				}
			}
		},
		created:function(){
			console.log(this.config.buyType)
			this.typeData.forEach((index) => {
				this.typeIndex.push(0)
			})
		}
	}
</script>

<style scoped>
	.buy-Now{
		width: 750upx;
		height: 100vh;
		position: fixed; 
		top: 0;
		left: 0;
		z-index: 30;
	}
	.mask{
		width: 750upx;
		height: 100vh;
		position: absolute;
		background: rgba(0,0,0,0.3);
	}
	.buyNow{
		width: 750upx;
		height: 850upx;
		position: absolute;
		bottom: 0;
		background: #FFFFFF;
		border-radius: 40upx 40upx 0 0 ;
		box-shadow:0px -2px 8px 0px #000000; 
		z-index: 30;
	}
	.close{
		position: absolute;
		right: 25upx;
		top:24upx;
		width: 24upx;
		height: 24upx;
		min-height: 18px;
		min-width: 18px;
	}
	.buy-box{
		width: 750upx;
		height: auto;
		margin-top: 42upx;
		display: table;
	}
	.goods-img{
		width: 184upx;
		height: 184upx;
		margin-left: 32upx;
		float: left;
	}
	.price{
		color: #55A0FF;
		line-height: 28upx;
		font-size: 28upx;
		margin-left: 18upx;
		float: left;
		height: 40upx;
		margin-top: 37upx;
		display: block;
	}
	.priceNum{
		color: #55A0FF;
		font-size: 38upx;
		line-height: 20upx;
		display: block;
		height: 40upx;
		float: left;
		margin-top: 37upx;
	}
	.goodsNum{
		font-size: 26upx;
		color: #55A0FF;
		display: block;
		padding-top: 28upx;
		margin-left: 240upx;
	}
	.goodsNo{
		font-size: 24upx;
		color: #999999;
		padding-top: 30upx;
		display: block;
		margin-left: 240upx;
	}
	.buy-label{
		color: #333333;
		font-size: 28upx;
		margin-left: 30upx;
		width: 690upx;
	}
	.item-list{
		width: 690upx;
		display: flex;
		margin-top: 20upx;
		margin-left: 30upx;
		flex-wrap: wrap;
		flex-direction: row;
	}
	.item{
		padding-left:20upx;
		padding-right:20upx;
		border: #FFFFFF solid 1px;
		border-radius: 30upx;
		font-size: 26upx;
		height: 55upx;
		background: rgba(246,246,246,1.00);
		margin: 0 10upx;
		color: rgba(51,51,51,1.00);
		line-height: 55upx;
		margin-top: 10upx;
	}
	.item-active{
		border: #55A0FF solid 1px;
		color: #55A0FF;
	}
	.hf-l{
		width: 300upx;
		float: left;
	}
	.number{
		float: right;
		width: 146upx;
		height: 37upx;
		margin-right: 27upx;
		display: flex;
		flex-direction: row;
		text-align: center;
		line-height: 30upx;
	}
	.num{
		width: 58upx;
		height: 37upx;
		border-top: #999999 solid 1px;
		border-bottom: #999999 solid 1px;
		font-size: 28upx;
		line-height: 37upx;
	}
	.minus{
		width: 44upx;
		height: 37upx;
		border-radius: 10upx 0 0 10upx;
		border: #999999 solid 1px;
		
	}
	.add{
		width: 44upx;
		height: 37upx;
		border-radius: 0 10upx 10upx 0;
		border: #999999 solid 1px;
	}
	.amUnable{
		color: #999999;
	}
	.buy-btn{
		width: 703upx;
		height: 68upx;
		color: #FFFFFF;
		margin-left: auto;
		margin-right: auto;
		margin-top: 30upx;
		line-height: 68upx;
		text-align: center;
		border-radius: 50upx;
		font-size: 28upx;
		background: -webkit-linear-gradient(left, #54B1FF,#5873FF);
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(right, #54B1FF,#5873FF);
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(right, #54B1FF,#5873FF);
		/* Firefox 3.6 - 15 */
		background: linear-gradient(to right, #54B1FF,#5873FF);
		/* 标准的语法 */
	}
</style>
